<template>
  <div class="login-account">
    <el-form label-width="58px" size="large" :rules="rules" :model="accountForm" ref="formRef">
      <el-form-item label="账号" prop="account">
        <el-input v-model="accountForm.account" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input show-password v-model="accountForm.password" placeholder="请输入密码"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { rules } from '../config/account-config.js'
import { useStore } from 'vuex'
import { useSetCache } from '@/hooks/login.js'
import localCache from '@/utils/cache.js'

const store = useStore()
const accountForm = reactive({
  account: localCache.getCache('account') ?? '1111@gk.com',
  password: localCache.getCache('password') ?? '123456'
})
const formRef = ref(null)

// 登录
const login = (isKeepPassword) => {
  useSetCache(isKeepPassword, accountForm)
  store.dispatch('userModule/loginAction', {accountForm, role: 1})
}

// 检查表单是否有为空
const isEmpty = computed(() => {
  if (accountForm.account===''|| accountForm.password==='') {
    return true
  }
})

// 重置表单
const reset = () => {
  accountForm.account = ''
  accountForm.password = ''
  formRef.value.resetFields()
}



defineExpose({login, reset, isEmpty})
</script>

<style lang="less" scoped>
</style>